<template>
    <div class="chart-view">
        <ChartView :key="key" :config="chartConfig" :loadView="loadView"></ChartView>
    </div>
</template>

<script>
import FormCustomPublic from "../FormCustomPublic";
import {ChartView} from "@lowcode/jpaas-screen-front";
import ScreenChartManageApi from "@/common/api/screen/screenChartManage.js"
import BusEvent from "../BusEvent";
import {cloneDeep} from 'lodash-es'
import {Util} from "@lowcode/jpaas-base-lib"
export default {
    name: "screenChartView",
    mixins:[FormCustomPublic,BusEvent],
    components: {
        ChartView
    },
    props: {},
    data() {
        return {
            screenChart:"",//大屏图表对象
            chartConfig:"",//大屏图表配置
            key:Util.randomId(),//用于刷新大屏图表
        }
    },
    created() {
        this.getScreenChart();
        let self_=this;
        if(!this.$bus.isChartEvent){
            this.$bus.on('chartEvent',  (args)=> {
                self_.handReceive(args,self_)
            });
            this.$bus.isChartEvent = true;
        }
    },
    beforeUnmount() {
        //销毁事件
        this.$bus.off("chartEvent");
    },
    methods: {
        getScreenChart(){
            if(!this.config.screenChart){
                return;
            }
            let screenChartId=JSON.parse(this.config.screenChart).value;
            ScreenChartManageApi.getScreenChart(screenChartId).then(res=>{
                if(res.success){
                    this.screenChart=res.data;
                    this.init();
                }
            });
        },
        init(receive){
            this.chartConfig="";
            if(this.screenChart && this.screenChart.config){
                let chartConfig=JSON.parse(this.screenChart.config);
                chartConfig.key=this.config.alias;
                chartConfig.title=this.config.name;
                if((this.config.publish && this.config.publish.paramMapping.length>0)
                    || (this.config.receive && this.config.receive.publishComponent)){
                    chartConfig.advancedConf.linkage=true;
                    chartConfig.advancedConf.publish=this.config.publish;
                    if(receive){
                        chartConfig.advancedConf.receive=receive;
                    }
                }
                this.chartConfig=chartConfig;
                this.key=Util.randomId()
            }
        },
        //大屏图表点击触发的方法
        handReceive(args){
            this.$bus.emit('formCustomViewEvent',args);
        },
        //处理事件传参
        handPublicReceive(args){
            if(this.config.receive.mapping){
                let receive=cloneDeep(this.config.receive);
                let  self=this;
                this.getParams(receive.mapping,function (res) {
                    let params=Object.assign(args.params,res);
                    for (let i = 0; i < receive.mapping.length; i++) {
                        let mapping=receive.mapping[i];
                        if(mapping.valueSource=='param' && params[mapping.valueDef]){
                            mapping.valueDef=params[mapping.valueDef];
                            mapping.valueSource='fixedVar';
                        }
                    }
                    self.init(receive);
                })
            }
        }
    },
    watch: {},
}
</script>

<style scoped>
.chart-view{
    height: 100%;
    width:100%;
    background-color: rgba(182,177,177,0.47)
}
.chart-view>>>.pie-wrap{
    height: 100%;
    width: 100%;
    display: flex;
}
</style>
